<template>
    <view>
        <view class='productNav'>
        <!--  <view class='left'>
            <view :class="posi == 'id'+index ?'selected':'normal'" @tap='switchNav("id"+index, index)' v-for="(item, index) in dataList" :key="index">{{item.name}}</view>
          </view> -->
          <!-- <view class='right'> -->
           <view>
               <view class="good-item" v-for="item in goodList" @click="goodsItem(item)">
                 <!-- 左侧盒子 -->
                 <view class="good-item-left">
                   <!--  没有得话就用默认图片  -->
                   <image :src="item.img" mode=""></image>
                 </view>
                 <!-- 右侧盒子 -->
                 <view class="good-item-right">
                   <view class="good-item-name">{{item.title}}</view>
				   <view class="goods-little-title gary-font text-line-hide">{{item.littleTitle}}</view>
                   <view class="goods-amount">
                   	<text space="emsp" >¥0</text>
                   	<view class="gary-font text-line-hide" style="text-decoration:line-through">¥{{item.amount}}</view>
                   </view>
				   <view class="goods-label"><button class="mini-btn" type="warn" size="mini">0元抽奖</button></view>
                 </view>
               </view>
             </view>
         <!-- </view> -->
        </view>
		<auth/>
    </view>
</template>

<script>
import {getLotteryInfoPage} from "../../service/base.js"
import auth from "@/components/authorization/index.vue"	
    export default {
		components:{
			auth
		},
        data() {
            return {
                posi: '',
                scrollTop: 0,
                data: ['推荐','电脑','手机','美妆'] ,//模拟数据
                dataList: [], //循环数据
                dataEleHeight: [] ,//获取data数组中各个元素的高度
                topList: [], //计算得到各个元素与顶部的距离
                scrollHeight: 500, //滚动区域的高度
                flag: true ,//判断左侧是否做高亮显示判断
				goodList:[],
				pageNum: 1,
				isLastPage: false,
				type: null,
				defaultimg: ""

            }
        },
		onShow() {
			var goodInfo = uni.getStorageSync("goodInfo")
			if(this.goodList && goodInfo){	
				for (let i = 0, len = this.goodList.length; i < len; i++) {
				    if (this.goodList[i].goodInfo.id === goodInfo.id) {
				        this.goodList[i].goodInfo = goodInfo;
				    }
				}
			}
		},
        onLoad() {
            //初始化数据，相当于请求数据
            for (let i = 0; i < this.data.length; i++) {
                let rand = parseInt(Math.random()*100,10);
                let num = []
                for(let j = 0; j < rand; j++) {
                    num.push(j);
                }
                let obj = {
                    id: 'id'+i,
                    name: this.data[i],
                    num: num
                }
                if(i == 0){
                    this.posi = obj.id
                }
                this.dataList.push(obj)
            }
			this.getLotteryInfo()
        },
        watch: {
            dataEleHeight(val) {
                if (val.length == this.dataList.length) {
                    //判断是第几个元素，高度设置为之前的元素高度之和
                    let top = 0
                    for (let i in this.dataEleHeight) {
                        if (i >= 0 && i < this.dataEleHeight.length) {
                            if(i != 0) {
                                top += this.dataEleHeight[i-1].height
                            }
                            this.topList.push(top);
                        }
                    }
                }
                console.log(this.topList)
            }
        },
        mounted(){
            let that = this
            for (let i = 0; i < this.dataList.length; i++) {
                //获取元素属性最好是在渲染之后执行，避免获取空值
                uni.createSelectorQuery().in(this).select('#'+this.dataList[i].id).boundingClientRect(function(rect){
                    let obj = {
                        id: that.dataList[i].id,
                        height: rect.height
                    }
                    that.dataEleHeight.push(obj);
                }).exec();
            }
        },
		onReachBottom() {
			if(this.isLastPage){
			  uni.showToast({
				title:"已经最后一页了",
				icon: 'none'
			  })	
			}else{
				this.pageNum ++ 
				this.getLotteryInfo()
			}
		},
        methods: {
            scroll(e) {
                let index = this.posi.substring(2)
                //如果点击了左侧分类,则不做左侧高亮显示判断
                if (this.flag) {
                    for(let i in this.topList){
                        if (i < this.topList.length - 1 && this.topList[i] <= e.detail.scrollTop && e.detail.scrollTop < this.topList[parseInt(i) + 1]) {
                            this.posi = this.dataList[i].id
                            break;
                        }
　　　　　　　　　　　　　　this.posi = this.dataList[i].id
                    }
                }
                this.flag = true
                this.scrollTop = e.detail.scrollTop //解决重复点击菜单时右侧数据不变的问题
            },
            switchNav: function (e, index) {
                this.flag = false
                if(this.posi != e){
                    this.posi = e
                } else {
                    //重复点击一样要定位到最开头的位置
                    this.scrollTop = this.topList[index];
                }
				this.type = index
				this.goodList = []
				this.getLotteryInfo()
            },
			getLotteryInfo() {
				getLotteryInfoPage({type:this.type,page_index:this.pageNum,page_size:10}).then(res =>{
					  var list = res.data.list
					  if(list){
						  list.forEach(item =>{
							  this.goodList.push({
								  title: item.name,
								  img: item.url,
								  littleTitle: item.remark,
								  amount: (item.lotteryNum/100 + 30).toFixed(2),
								  amountRemark: item.periodsName+"期",
								  goodInfo:item
							  })
						  })
					  } 
					  this.isLastPage = res.data.isLastPage
				})
			},
			goodsItem(item) {
				console.log(item)
				uni.setStorageSync("goodInfo",item.goodInfo)
				uni.navigateTo({
				  url: '/pages/lucky/lucky',
				});
			},
        }
    }
</script>

<style lang="scss">
    .productNav{
      display: flex;
      flex-direction: row;
      font-family: "Microsoft YaHei"
    }
    .left{
	  width: 25%;	
      font-size: 30rpx;
      background-color: #f4f4f4;
    }
    .left view{
      text-align: center;
      height: 90rpx;
      line-height: 90rpx;
    }
    .selected{
      background-color: #fff;
      border-left: 2px solid #E54847;
      font-weight: bold;
      color: #E54847;
    }
    .normal{
      background-color: #f4f4f4;
      border-bottom: 1px solid #f2f2f2;
    }
    .right{
      margin: 0;
    }
    .scroll{
      height: 500px;
      text-align: center;
    }
    .title{
        background: #E54847;
        color: white;
    }
	.good-item {
	  display: flex;
	  border-bottom: 2px solid #f1f1f1;
	
	  .good-item-left {
	    image {
	      height: 200rpx;
	      width: 200rpx;
	      display: block;
	    }
	
	    padding: 20rpx;
	  }
	
	  .good-item-right {
	    display: flex;
	    flex-direction: column;
	    justify-content: space-between;
	    padding: 20rpx;
	
	    .good-item-name {
	      font-size: 14px;
	
	    }
	
	    .good-item-info {
	      .good-price {
	        font-size: 16px;
	        color: #c00000;
	      }
	    }
	  }
	}
	.content-list {
		width: 100%;
		margin: 0 19rpx;
		display: flex;
		flex-wrap: wrap;
	}
	.goods-item {
		background-color: #ffffff;
		width: 347.5rpx;
		border-radius: 19rpx;
		margin: 0 19rpx 19rpx 0;
	}
	.goods-item image {
		width: 100%;
		height: 308rpx;
		border-radius: 19rpx 19rpx 0 0;
	}
	.goods-item-content {
		padding: 19rpx;
	}
	.goods-little-title {
		padding: 10rpx 0;
	}
	.goods-title {
		font-weight: bold;
	}
	.goods-amount {
		display: flex;
		align-items: baseline;
	}
	.goods-amount text {
		color: #ff0000;
	}
	.goods-amount view {
		margin-left: 22rpx;
	}
	.goods-label {
		padding: 10rpx 0 0;
	}
	.gary-font {
		color: #999;
		font-size: 22rpx;
	}
	.text-line-hide {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>